Obsidian-Digital-Garden CSS 样式优化

在本文中，分析 Obsidian-Digital-Garden 的 digitalgarden 模板工程内的 CSS 样式。了解这些样式，有助于我们进行更高级的样式定制、优化。

Obsidian-Digital-Garden 模板工程的样式文件，整体上还是比较复杂的。可总的分为两部分：

digitalgarden 工程内置样式
用户选择 Obsidian 主题样式

下面分别来看。

digitalgarden 工程内置样式

位于 src/site/styles 下存放样式，具体包括：

obsidian-base.scss：这是 0.0 Obsidian 介绍软件的样式，copy 一份过来，作为“打底”
digital-garden-base.scss：数字花园网站的样式
custom-style.scss：供用户定制的样式
style.scss：可能与主题相关，这个不太确定。

其中，obsidian-base.scss 和 digital-garden-base.scss 官方都不建议修改，因为 digitalgarden 在更新时会更新这两个样式，如果我们对其手动修改了，会导致冲突需要手动解决。custom-style.scss 是专门提供给用户，进行样式定制的。

整体上，obsidian-base.scss 打底、digital-garden-base.scss 网站适配、custom-style.scss 用户定制。

用户选择 Obsidian 主题样式

Obsidian-Digital-Garden 允许用户设置主题，并且跟 0.0 Obsidian 介绍主题通用。

该主题在 0.0 Obsidian 介绍内通过 Obsidian-Digital-Garden 插件进行设置，设置成功后会更改模板工程根目录的 .env 文件的 THEME 一项：

THEME=https://raw.githubusercontent.com/maxiee/obsidian-border/main/theme.css

设置的值为 Obsidian 主题对应的 CSS 文件。

Note

通过代码可以看出，我使用 Obsidian Border 主题，但是该主题的默认样式，在数字花园中展示不够完美，于是我又 Fork 了一份，进行了一些小调整。

从中也可以看出，尽管 Obsidian-Digital-Garden 主题跟 0.0 Obsidian 介绍主题通用，但两者无法保证 100% 兼容。

样式复杂度

整体上，digitalgarden 的样式是非常复杂的。从几个样式文件的行数可看出：

obsidian-base.scss：1w+ 行
digital-garden-base.scss：1k+ 行
custom-style.scss：0
style.scss：200 行左右
obsidian-border 的 theme.css：8k 行

加起来接近 2w 行 css，太多了！原因是：obsidian-base.scss，theme.css 都是整个 0.0 Obsidian 介绍的样式，文章格式只是其中的一小部分。

作者的思路我能够理解，obsidian-base.scss，theme.css 都是别人交付的产物，我们直接复用，进行微调，最终通过优化器，剪掉用不到的样式，这样最终产物 CSS 还是小的，同时数字花园网站的样式设置，与 Obsidian 软件样式设置方法保持一致。

从这一角度来说，我赞同作者，这是一个成本低，同时延续 Obsidian 习惯的好方法。

Note

但我还是对 obsidian-base.scss 下手了，删除数字花园中用不到的样式，目前压缩到 4.5k 行，还有很大的优化空间。这也意味着我与上游不一致，未来在升级时有很麻烦。

digital-garden-base.scss

digital-garden-base.scss 是数字花园网站的结构样式，在本文中，对几个重要样式进行梳理。

这段 SCSS 代码定义了一个名为 .navbar 的 CSS 类，该类用于样式化一个导航栏。以下是每个属性的解释：

background-color: var(--background-secondary);：设置导航栏的背景颜色为 --background-secondary 变量定义的颜色。
position: absolute;：设置导航栏的定位方式为绝对定位，这意味着导航栏的位置将相对于最近的定位祖先元素（而不是视口）进行定位。
width: 100%;：设置导航栏的宽度为 100%，即占据其父元素的全部宽度。
top: 0; left: 0; right: 0;：设置导航栏的顶部、左侧和右侧边缘与其定位祖先元素的距离为 0，这将使导航栏在水平方向上拉伸以填充其父元素。
z-index: 3;：设置导航栏的堆叠顺序为 3，这意味着如果有其他元素和导航栏重叠，导航栏将显示在这些元素之上。
padding-left: var(--file-margins);：设置导航栏左侧的内边距为 --file-margins 变量定义的值。
display: flex;：设置导航栏为弹性布局，这将使其子元素在行内方向上排列，并允许使用弹性布局的其他属性。
justify-content: space-between;：设置导航栏子元素之间的空间分布，space-between 值表示子元素之间的空间均匀分布，第一个元素在开始位置，最后一个元素在结束位置。
align-items: center;：设置导航栏子元素在交叉轴上的对齐方式，center 值表示子元素在交叉轴上居中对齐。

此外，这段代码还包含了一些媒体查询，这些媒体查询将在视口宽度小于特定值时应用不同的样式。例如，当视口宽度小于 1400px 时，导航栏的定位方式将变为固定定位；当视口宽度小于 800px 时，.navbar 的子元素 .search-text 将不显示。

.navbar-inner 和 .search-button、.search-text 是 .navbar 的子元素，它们也有自己的样式定义。

这段 SCSS 代码定义了一个名为 .sidebar-container 的 CSS 类，该类用于样式化一个侧边栏容器。以下是每个属性的解释：

padding-right: 20px;：设置侧边栏容器右侧的内边距为 20px。
width: 100%;：设置侧边栏容器的宽度为 100%，即占据其父元素的全部宽度。
overflow-y: auto;：设置侧边栏容器在垂直方向（y轴）上的溢出处理方式为自动。如果内容超出了容器的高度，将显示滚动条。
display: flex;：设置侧边栏容器为弹性布局，这将使其子元素在行内方向上排列，并允许使用弹性布局的其他属性。
flex-direction: column;：设置侧边栏容器的主轴方向为垂直方向，这将使其子元素在垂直方向上排列。
justify-content: flex-start;：设置侧边栏容器子元素在主轴上的对齐方式，flex-start 值表示子元素在主轴的开始位置对齐。
height: 87%;：设置侧边栏容器的高度为 87%，即占据其父元素高度的 87%。

.toc-container

右侧边栏目录容器。

这段 SCSS 代码定义了一个名为 .toc-container 的 CSS 类，该类用于样式化一个表格的内容（Table of Contents）容器。以下是每个属性的解释：

font-size: 1rem;：设置容器的字体大小为 1rem，1rem 等于根元素（通常是 <html>）的字体大小。
max-height: 220px;：设置容器的最大高度为 220px。如果内容超出这个高度，将会根据 overflow-y 的设置来处理。
overflow-y: auto;：设置容器在垂直方向（y轴）上的溢出处理方式为自动。如果内容超出了容器的高度，将显示滚动条。
margin-bottom: 10px;：设置容器底部的外边距为 10px。
border-left: 1px solid var(--text-accent);：设置容器左侧的边框宽度为 1px，样式为实线，颜色为 --text-accent 变量定义的颜色。

此外，这段代码还包含了对 .toc-container 的子元素 ul、li 和 a 的样式定义。例如，ul 元素的列表样式类型被设置为无，左侧内边距被设置为 15px，顶部和底部外边距被设置为 0；li 元素的顶部内边距被设置为 4px，还添加了一个伪元素 ::before，该伪元素的内容为 "# "，颜色和字体大小也有相应的设置；a 元素的文本装饰被设置为无，当鼠标悬停时，文本装饰被设置为下划线。

本文作者：Maeiee

本文链接：Obsidian-Digital-Garden CSS 样式优化

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！